<template>
<view class="page">
	<template v-if="isLogin">	
		<!-- 药剂管理 -->
		<template v-if="type==0">
			<view class="body">
				<view class="list-wrap">
					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>
					<template v-else>
						<template v-if="list.length>0">
							<navigator open-type="navigate" hover-class="none" :url="'/package_yaoji/yaoJiDetail/yaoJiDetail?type=1&id='+item.id" class="navigator-item" v-for="(item,index) in list" :key="index">
								<view class="item"> 
									<view class="pic">
										<image :src="img_path+item.file_path" mode="widthFix"></image>
									</view>
									<view class="info">
										<view class="name">{{item.potion_name}}</view>
										<view class="params">
											<view class="text">品牌：{{item.potion_brand}}</view>
											<view class="text">农药登记好：{{item.registration_No}}</view>
											<view class="text">上架时间：{{item.addtime}}</view> 
										</view>									
									</view>								
								</view>  
							</navigator>
							 
							<loading :loadingState="loadingState"></loading>
						</template>
						<template v-else>
							<empty msg="暂无信息"></empty>
						</template>
						
					</template>
				</view>
			</view>
			<view class="footer">
				<view class="fix-wrap bottom">
					<navigator open-type="navigate" url="/package_yaoji/addYaoJi/addYaoJi" hover-class="none" class="form-lay-btn buy-btn">
						<view class="icon">
							<view class="iconfont icon-caigou-xianxing f-s40"></view>
						</view>
						<text>添加药剂</text>
					</navigator>
				</view>
			</view>			 
		</template>
		
		<!-- 药剂分配 -->
		<template v-if="type==1">
			<view class="list-wrap">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				<template v-else>
					<template v-if="list.length>0"> 
						<navigator open-type="navigate" hover-class="none" :url="'/package_yaoji/yaoJiDetail/yaoJiDetail?type=2&fp_company='+item.company_name+'&id='+item.id" class="item" v-for="(item,index) in list" :key="index">
							<view class="pic">
								<image :src="img_path+item.file_path" mode="widthFix"></image>
							</view>
							<view class="info">
								<view class="name">{{item.potion_name}}</view>
								<view class="params"> 
									<view class="text">分配至：{{item.company_name}}</view>
									<view class="text">分配数量：{{item.potion_sum}}{{item.pack_name}}</view> 
									<view class="text">分配时间：{{item.create_time}}</view> 
								</view>
							</view>
						</navigator> 
						
						<loading :loadingState="loadingState"></loading>
					</template>
					<template v-else>
						<empty msg="暂无信息"></empty>
					</template>
					
				</template>
			</view>
		</template>
		
		<!-- 我的药剂 -->
		<template v-if="type==2">
			<view class="body">
				<view class="list-wrap">
					<template v-if="loadingState.default">
						<loading :loadingState="loadingState"></loading>
					</template>
					<template v-else>
						<template v-if="list.length>0">
							<navigator open-type="navigate" hover-class="none" :url="'/package_yaoji/yaoJiDetail/yaoJiDetail?type=3&id='+item.id" class="item" v-for="(item,index) in list" :key="index">
								<view class="pic">
									<image :src="img_path+item.file_path" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="name">{{item.potion_name}}</view>
									<view class="params">
										<view class="text">采购单位：{{item.company_name}}</view>
										<view class="text">采购数量：{{item.potion_sum}}{{item.pack_name}}</view>
										<view class="text">剩余数量：{{item.potion_sum-item.fp_sum-item.fk_sum}}{{item.pack_name}}</view> 
									</view>
								</view>
							</navigator> 
							<loading :loadingState="loadingState"></loading>
						</template>
						<template v-else>
							<empty msg="暂无信息"></empty>
						</template>
						
					</template>
				</view>
			</view>
			<view class="footer">
				<view class="fix-wrap bottom">
					<navigator open-type="navigate" url="/package_yaoji/buyYaoJi/buyYaoJi" hover-class="none" class="form-lay-btn buy-btn">
						<view class="icon">
							<view class="iconfont icon-caigou-xianxing f-s40"></view>
						</view>
						<text>药剂采购</text>
					</navigator>
				</view>
			</view>
			 
		</template>
		
	</template>
</view>
</template>

<script> 
import loading from '@/components/loading-more.vue'
import empty from '@/components/empty.vue'
import {img_path} from '@/config.js'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			loadingState:{
				default:true,
				loading:false,
				completed:false
			},
			type:'0',   // 0 药剂管理  1 药剂分配  2 我的药剂 
			page:1,
			total:0,
			list:[],
			img_path:img_path
		}
	},
	onShow() {
		
	},
	async onLoad(params) {
		this.type=params.type;
		this.isLogin = await this.$loginState('check');
		if(this.isLogin){  
			if(this.type==0){
				this.getPotionList();						
				uni.setNavigationBarTitle({
					title:"药剂管理"
				})
			}else if(this.type==1){
				this.getFpList();
				uni.setNavigationBarTitle({
					title:"药剂分配记录"
				})
			}else if(this.type==2){					
				this.getPotionManage();	
				uni.setNavigationBarTitle({
					title:"我的药剂"
				})
			}
		}
	},
	onReachBottom(){
		if(this.loadingState.completed){
			this.page=1;
			return false
		}else{
			if(this.list.length<this.total&&this.list.length>0){
				this.page++;
				if(this.type==0){
					this.getPotionList();					
				}else if(this.type==1){
					this.getFpList();
				}else if(this.type==2){
					this.getPotionManage();
				}
			} 
		}	 
	},
	methods:{
		
		// 标签切换
		changeTab:function(id){
			this.type=id;
			this.list=[];
			this.page=1;
			this.loadingState.default=true;
			this.loadingState.loading=false;
			this.loadingState.completed=false;
			if(this.type==0){
				this.getPotionList();				
			}else if(this.type==1){
				this.getFpList();
			}else if(this.type==2){
				this.getPotionManage();
			}
			
		},
		
		// 获取我的药剂
		getPotionManage:async function(){
			let res=await this.$api.ycj_api.getPotionManage({
				page: this.page,
				type: this.type, 
				is_app:1
			}) 
			if(res.data.ret==0){ 
				this.loadingState.default=false;
				this.loadingState.loading=true; 
				this.total=res.data.data.count;
				this.list=this.list.concat(res.data.data.list);
				if(this.list.length>=this.total){ 
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}
				
			}else{
				this.loadingState.default=false;
			} 
			
		},
		
		// 获取分配详情
		getFpList:async function(){
			let res=await this.$api.ycj_api.getFpList({
				page: this.page,
				type: this.type, 
				is_app:1
			})
			if(res.data.ret==0){
				this.loadingState.default=false;
				this.loadingState.loading=true; 
				this.total=res.data.data.count;
				this.list=this.list.concat(res.data.data.list);
				if(this.list.length>=this.total){
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}
			}else{
				this.loadingState.default=false;
			} 
		},
		
		// 获取药剂管理列表
		getPotionList:async function(){
			let res=await this.$api.ycj_api.getPotionList({
				page: this.page,
				type: this.type,
				is_app:1
			}) 
			console.log(res)
			if(res.data.ret==0){
				this.loadingState.default=false;
				this.loadingState.loading=true; 
				this.total=res.data.data.count;
				this.list=this.list.concat(res.data.data.list);
				if(this.list.length>=this.total){
					this.loadingState.loading=false;
					this.loadingState.completed=true;
				}
			}else{
				this.loadingState.default=false;
			} 
		}
		
	},
	computed:{
		
		// 药剂列表更新
		list_update(){   
			return this.$store.state.yjListUpdate;
		},
		
		// 药剂管理更新
		potion_manage_update(){
			return this.$store.state.myYaojiUpdate;
		},
		
		// 药剂库存更新
		myYaoJi_sum_update(){  
			return this.$store.state.myYaojiSumUpdate;
		}
		
	},
	watch:{
		list_update(newer,older){ 
			if(newer!=older){				
				this.loadingState={
					default:true,
					loading:false,
					compelted:false
				};
				this.list=[];
				this.getPotionList();  
			}
		},
		
		// 监听我的药剂列表更新
		potion_manage_update(newer,older){
			if(newer!=older){
				this.loadingState={
					default:true,
					loading:false,
					compelted:false
				};
				this.list=[];
				this.getPotionManage(); 
			}
		},
		
		// 监听我的药剂库存更新
		myYaoJi_sum_update(newer,older){
			if(newer!=older){		
				this.loadingState={
					default:true,
					loading:false,
					compelted:false
				};
				this.list=[];
				this.getPotionManage();  		
			}
		}
		
		
	},
	components:{
		loading,
		empty
	}
}
</script>

<style scoped lang="less">
	.list-wrap{
		.navigator-item{
			background:#fff;
		}
		.btn-bar{
			display: flex;
			justify-content: flex-end;
			margin:0 20rpx;
			padding:20rpx 0;
			border-top:1rpx solid #eee;
			.btn{
				padding:3rpx 5rpx;
				background: #f00;
				border-radius: 5rpx;
				color:#fff;
				font-size: 32rpx;
			}
		}
		.item{ 
			display: flex;
			padding:20rpx;
			margin-top: 20rpx;
			background:#fff;
			.pic{
				width:25%;
				max-height: 200rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
			.info{
				flex-grow: 2;
				.name{
					margin-bottom: 10rpx;
					font-size: 32rpx;
				}
				.params{
					font-size:30rpx;
					color:#999;
					.text{
						margin-bottom:8rpx;
					}
				}
			}
		}
	}
	
	.buy-btn{ 
		display: flex;
		justify-content: center;
	}
</style>
